<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    request.setAttribute("path", path);
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">
    <title>标题</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>

</head>
<body>
<form action="upload" method="post" enctype="multipart/form-data">
    <%--    文件上传--%>
    <div class="layui-upload">
        <button type="button" class="layui-btn" id="test2">图片上传</button>
        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
            预览图：
            <div class="layui-upload-list" id="demo2"></div>
        </blockquote>
        <%--用来存储图片上传成功后返回的url--%>
        <input  id="imgurlCode" name="url"/>
    </div>
</form>



<script type="text/javascript">
    layui.use(['table','form','jquery','layer','upload'], function() {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;
        var layer = layui.layer;
        var upload = layui.upload;

        //图片上传
        upload.render({
            elem: '#test2'
            ,url: '${pageContext.request.contextPath}/book/upload' //改成您自己的上传接口
            //,multiple: true
            ,//用于文件上传前的回调
            choose: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" width="60px" height="60px">')
                });
            }
            ,done: function(res){//上传成功后的回调函数
                alert(res.url);
                $("#imgurlCode").val(res.url);//将上传成功后得到的图片的url返回，并且赋值给表单中隐藏url框
                layer.msg('上传成功',{icon: 1});
            }


        });
      /*  ,done: function(res){//上传成功后的回调函数
            alert(res.url);
            //$("#imgpath").val(res);
            $("#imageUrl").val(res.url);//将上传成功后得到的图片的url返回，并且赋值给表单中隐藏url框
            //alert(res.str);
            layer.msg('上传成功');
            layui.$('#test2').removeClass('layui-hide').find('img').attr('src', res.str);
        }*/

    });
</script>

</body>
</html>
